<template>
  <op-dialog
    class="center-dialog-block"
    v-model="dialogVisibleRef"
    v-if="dialogVisibleRef"
    :title="title"
    @buttonClick="buttonClick"
    :buttonList="buttonList"
    width="440px"
  >
    <div class="failed-box">
      <p class="failed-color1">Number of ineffective periods.</p>
      <p class="failed-color2">Please download and check it and upload it again.</p>
      <span @click="handleDownload">
        <u>ErrorFile.xlsx</u>
        <img src="@/assets/image/download.png" />
      </span>
    </div>
  </op-dialog>
</template>

<script setup>
import { apiMethods } from '@/utils/http.js';
const dialogVisibleRef = ref(false);
const rowData = ref({});
const title = ref('');
const downloadUrl = ref('');
const buttonList = [
  //小弹窗按钮高度40px
  {
    prop: 'cancel',
    label: 'Cancel',
    backgroundColor: '#f6f6f6',
    color: '#303133',
    height: '40px',
    width: '180px',
    fontSize: '16px',
  },
  {
    prop: 'confirm',
    label: 'Download',
    backgroundColor: '#127bbc',
    color: '#ffffff',
    height: '40px',
    width: '180px',
    fontSize: '16px',
  },
];
const emit = defineEmits(['success']);

const buttonClick = async prop => {
  if (prop === 'cancel') {
    dialogVisibleRef.value = false;
  } else {
    handleDownload();
  }
};
const init = row => {
  dialogVisibleRef.value = true;
  rowData.value = row;
  title.value = row?.title || 'Failed';
  downloadUrl.value = row?.downloadUrl;
};
const destroy = row => {
  dialogVisibleRef.value = false;
};
const handleDownload = () => {
  apiMethods['file_handler']({
    url: downloadUrl.value,
    fileType: 'xlsx',
    action: 'download',
    params: { fileName: 'ErrorFile.xlsx' },
  });
  dialogVisibleRef.value = false;
};
defineExpose({ init, destroy });
</script>

<style lang="scss" scoped>
.failed-box {
  margin: 10px 0;
  text-align: center;
  p {
    line-height: 16px;
    margin-bottom: 10px;
  }
  .failed-color1 {
    color: #303033;
    font-size: 16px;
  }
  .failed-color2 {
    color: #909399;
    margin-bottom: 20px;
  }
  span {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    u {
      text-decoration: none;
      margin-right: 10px;
      color: #127bbc;
      line-height: 20px;
    }
  }
}
</style>
